<template>
  <div>
    <el-form
      :model="forget_form"
      :rules="forget_rules"
      ref="forget"
      class="w-400px m-auto"
    >
      <el-form-item prop="password" label="">
        <el-input v-model="forget_form.password" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="">
        <el-input
          v-model="forget_form.phone"
          placeholder="手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" label="">
        <div class="flex flex-justify-between flex-items-center">
          <el-input
            v-model="forget_form.code"
            placeholder="验证码"
            class="w-200px"
          ></el-input>
          <el-button
            type="warning"
            :loading="checkCodeBtn.loading"
            :disabled="checkCodeBtn.disabled"
            @click="getCheckCode"
            style="margin-left: 5px"
            class="btn bg-#fcf9f9 border-color-#fcf9f9 text-17px text-#bb0615"
          >
            {{ checkCodeBtn.text }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item prop="" label="" class="mt-40px">
        <div class="register cursor-pointer" @click="handle_forget">提交</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits } from "vue";
import { forget_rules } from "../data.config";
import { send_code, change_password } from "@/api/index";
import { ElMessage } from "element-plus";

const $emit = defineEmits()
const forget = ref()
let checkCodeBtn = reactive({
  text: "获取验证码",
  loading: false,
  disabled: false,
  duration: 60,
  timer: null,
});

const forget_form = reactive({
  password: "",
  phone: "",
  code: "",
});

const getCheckCode = async () => {
  // 倒计时期间按钮不能单击
  if (!forget_form.phone) {
    ElMessage({
      message: "请填写手机号！",
      type: "error",
    });
  } else {
    if (checkCodeBtn.duration !== 60) {
      checkCodeBtn.disabled = true;
    } else {
      // 清除掉定时器
      checkCodeBtn.timer && clearInterval(checkCodeBtn.timer);
      // 开启定时器
      const { data } = await send_code({ phone: forget_form.phone });
      checkCodeBtn.timer = setInterval(() => {
        const tmp = checkCodeBtn.duration--;
        checkCodeBtn.text = `${tmp}秒`;
        if (tmp <= 0) {
          // 清除掉定时器
          clearInterval(checkCodeBtn.timer);
          checkCodeBtn.duration = 60;
          checkCodeBtn.text = "重新获取";
          // 设置按钮可以单击
          checkCodeBtn.disabled = false;
        }
      }, 1000);
    }
  }
};

const handle_forget = async () => {
  if (!forget.value) return;
  await forget.value.validate(async (valid, fields) => {
    if (valid) {
      const { data, code } = await change_password(forget_form);
      if (code === 200) {
        ElMessage.success("提交成功");
        forget_form.password = ""
        forget_form.phone = ""
        forget_form.code = ""
        $emit('close_forget', false)
      } else {
        ElMessage.error("提交失败！");
      }
    } else {
    }
  });
};
</script>

<style scoped>
.btn:hover {
  background-color: #fcf9f9;
  border-color: #fcf9f9;
  color: #bb0615;
}
.register {
  width: 514px;
  height: 34px;
  background-color: #bb0615;
  border-radius: 22px;
  font-family: MicrosoftYaHei;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: 18px;
  color: #faf5f5;
  text-align: center;
}
</style>
